<template>
  <SearchTable :query="data.query" :list="data.list" :total="data.total" @changeSize="changeSize"
    @changePage="changePage" @search="getSearchList" @changeTh="data.dialogVisible = true" @reset="handleReset">
    <template #form>
      <el-form-item label="账号：" v-show="!indexStore.is_general_agent">
        <el-input v-model="data.query.username" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="IP：">
        <el-input v-model="data.query.ip" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="状态：">
        <el-select v-model="data.query.success" placeholder="请选择">
          <el-option label="全部" :value="-1" />
          <el-option v-for="item in SUCCESSlIST" :key="item.label" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="日期时间：">
        <el-date-picker v-model="data.query.date" type="daterange" range-separator="-" start-placeholder="请选择开始时间"
          end-placeholder="请选择结束时间" value-format="YYYY-MM-DD" />
      </el-form-item>
    </template>

    <template #table>
      <template v-for="(item, index) in data.fields" :key="index">
        <el-table-column v-if="item.visible" :prop="item.prop" :label="item.label" :width="item.width"
          show-overflow-tooltip>
          <template #header>
            <el-tooltip v-if="item.tips" effect="dark" placement="top">
              <template #content> {{item.tips}} </template>
              <el-icon class="ques-tips">
                <QuestionFilled />
              </el-icon>
            </el-tooltip>
            {{ item.label }}
          </template>
          <template v-if="item.prop == 'manager_id'" #default="scope">
            <span>{{ scope.row.username }}</span>
          </template>
          <template v-if="item.prop == 'success'" #default="scope">
            <el-tag :type="scope.row.success ? 'primary' : 'warning'">
              {{ selectToLabel(SUCCESSlIST, scope.row.success) }}
            </el-tag>
          </template>
          <template v-if="item.prop == 'ip'" #default="scope">
            {{ scope.row.ip }}
            <span v-if="scope.row.ip">({{ scope.row.ip_country }})</span>
          </template>
          <template v-if="item.prop == 'create_time'" #default="scope">
            {{ setTimestampTime(scope.row.create_time) }}
          </template>
        </el-table-column>
      </template>
    </template>
  </SearchTable>

  <!-- 变更表头弹框 -->
  <tableHeader :dialogVisible="data.dialogVisible" :list="data.fields" @cancel="data.dialogVisible = false"
    @resetData="resetData"></tableHeader>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs, onMounted, computed } from 'vue'
import { systemLoginLogList } from '@/api/user'
import tableHeader from '@/components/tableHeader/tableHeader.vue'
import { selectToLabel } from '@/utils/index'
import SearchTable from '@/components/SearchTable/SearchTable.vue'
import { setTimeValue, setTimestampTime } from '@/utils/time'
import { SUCCESSlIST } from '@/config/eunm'
import { useStore } from '@/stores/index'
const indexStore = useStore()

const data = reactive({
  query: {
    page: 1,
    size: 50,
    success: -1,
    username: '',
    ip: '',
    date: [],
    start_time: '', // 开始时间
    end_time: '' // 结束时间
  },
  list: [],
  total: 0,
  fields: [
    // { label: 'ID', prop: 'id', width: '' ,visible: true, tips: '' },
    { label: '管理员账号', prop: 'manager_id', width: '240' ,visible: true, tips: '总代后台账号名称' },
    // { label: '管理员账号', prop: 'username', width: '150' ,visible: true, tips: '' },
    { label: '是否成功', prop: 'success', width: '120' ,visible: true, tips: '商户登录后台的状态显示' },
    { label: '浏览器', prop: 'browser', width: '' ,visible: true, tips: '商户登录后台的浏览器标识' },
    { label: '描述', prop: 'remark', width: '300' ,visible: true },
    { label: 'IP', prop: 'ip', width: '180' ,visible: true, tips: '商户登录后台时IP地址' },
    { label: '创建时间', prop: 'create_time', width: '180' ,visible: true, tips: '记录创建时间；也为商户登录后台时间' }
  ],
  dialogVisible: false
})

onMounted(async () => {
  getSearchList()
})

const getSearchList = async () => {
  indexStore.setPageLoading(true)
  data.query = setTimeValue(data.query)
  let res = await systemLoginLogList(data.query)
  indexStore.setPageLoading(false)
  data.list = res.data.list
  data.total = res.data.total
}

// 重置
const handleReset = () => {
  data.query = {
    page: 1,
    size: 50,
    success: -1,
    username: '',
    ip: '',
    date: [],
    start_time: '', // 开始时间
    end_time: '' // 结束时间
  }
  getSearchList()
}

// 修改页数
const changeSize = (val: number) => {
  data.query.size = val
  getSearchList()
}

const changePage = (val: number) => {
  data.query.page = val
  getSearchList()
}

// 重置表头
const resetData = (val: any) => {
  data.fields = val
}
</script>

<style scoped lang="scss"></style>
